<!-- 商品分类模块 -->
import { async } from 'q';
<template>
    <div class="cate">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图模块 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type='primary' @click="addCate">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格区域 -->
            <tree-table :data="cateList" :columns="columns" border :selection-type="false" :expand-type='false'
                :show-index="true" index-text="#" style="margin:18px 0">
                <template slot="isOK" scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:green"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>
                <template slot="level" scope="scope">
                    <el-tag v-if="scope.row.cat_level===0">一级权限</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.cat_level===1">二级权限</el-tag>
                    <el-tag type="danger" v-else>三级权限</el-tag>
                </template>
                <template slot="operation" scope="scope">
                    <el-button type="primary" @click="modifyCateMsg(scope.row.cat_id)">
                        <i class="el-icon-edit"></i> 编辑
                    </el-button>
                    <el-button type="danger" @click="deleteCate(scope.row.cat_id)">
                        <i class="el-icon-delete"></i> 删除
                    </el-button>
                </template>
            </tree-table>

            <!-- 添加分类对话框 addCateVisiable-->
            <el-dialog title="提示" :visible.sync="addCateVisiable" width="30%" @close="cleanAddCateMsg">
                <el-form ref="addCateForm" :model="addCateMsg" label-width="80px" :rules="rules">
                    <!-- 分类名称 -->
                    <el-form-item label="分类名称" prop="catName">
                        <el-input v-model="addCateMsg.cat_name"></el-input>
                    </el-form-item>
                    <!-- 选择父类 -->
                    <el-form-item label="父类名称">
                        <el-cascader v-model="addCateMsg.cat_pid" :options="ParentCate" :props="cascaderOption"
                            @change="updateAddCateMsg" clearable change-on-select></el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addCateVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="submitAddCate">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 编辑分类信息对话框 -->
            <el-dialog title="提示" :visible.sync="modifyCatevisiable" width="30%">
                <el-form ref="form" label-width="80px" :model="modifyCate">
                    <el-form-item label="分类名称">
                        <el-input v-model="modifyCate.cat_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="modifyCatevisiable = false">取 消</el-button>
                    <el-button type="primary" @click="submitModifyCateMsg">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 分页功能 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 20, 30]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        created() {
            this.getCateData()
        },
        data() {
            return {
                //请求参数
                queryInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                //请求到的分类
                cateList: [],
                //请求到的数据总数
                total: 0,
                //表格列
                columns: [{
                        label: '分类名称',
                        prop: 'cat_name',
                    },
                    {
                        label: '是否有效',
                        type: 'template',
                        template: 'isOK'
                    },
                    {
                        label: '权限等级',
                        type: 'template',
                        template: 'level'
                    },
                    {
                        label: '操作',
                        type: 'template',
                        template: 'operation',
                        width: '300px'
                    }
                ],
                //是否打开添加分类对话框
                addCateVisiable: false,
                //增加分类
                addCateMsg: {
                    //cat_pid表示分类的父id，不能为空，如果要添加一级分类，则pid为0
                    cat_pid: 0,
                    cat_name: '',
                    cat_level: 0
                },
                rules: {
                    catName: [{
                        require: true,
                        trigger: 'blur',
                        message: '分类名不能为空'
                    }],
                },
                cascaderOption: {
                    expandTrigger: 'hover',
                    value: 'cat_id',
                    label: 'cat_name',
                    children: 'children'
                },
                //所有父节点
                ParentCate: [],
                selecteKeys: [],
                //编辑用户信息
                modifyCate: {
                    cat_name: ''
                },
                modifyCatevisiable: false,
                modifyID: ''
            }
        },
        methods: {
            async getCateData() {
                const {
                    data: res
                } = await this.$http.get('categories', {
                    params: this.queryInfo
                })
                if (res.meta.status !== 200) {
                    return this.$message.erorr('获取用户列表失败！')
                }
                console.log(res.data)
                this.cateList = res.data.result
                this.total = res.data.total
            },
            // 添加分类
            addCate() {
                this.getParentCate()
                this.addCateVisiable = true
            },
            //提交添加分类请求
            async submitAddCate() {
                const {
                    data: res
                } = await this.$http.post('categories', this.addCateMsg)
                if (res.meta.status !== 201) {
                    return this.$message.error('增加用户分类失败')
                }
                this.$message.success('增加用户分类成功')
                console.log(res)
                this.getCateData()
                this.addCateVisiable = false
            },
            //关闭对话框清除addCateMag
            cleanAddCateMsg() {
                this.addCateMsg = {}
            },
            //获取所有一二级分类
            async getParentCate() {
                const {
                    data: res
                } = await this.$http.get('categories', {
                    params: {
                        type: 2
                    }
                })
                console.log(res)
                this.ParentCate = res.data
            },
            //在数据表改变的时候更新addCateMsg
            updateAddCateMsg() {
                this.selecteKeys = this.addCateMsg.cat_pid
                if (this.selecteKeys.length > 1) {
                    this.addCateMsg.cat_pid = this.selecteKeys[this.selecteKeys.length - 1]
                    this.addCateMsg.cat_level = this.selecteKeys.length
                } else {
                    this.addCateMsg.cat_pid = this.selecteKeys[0]
                    this.addCateMsg.cat_level = this.selecteKeys.length
                }
                console.log(this.addCateMsg);
            },
            //分页功能
            //每页显示条数改变
            handleSizeChange(size) {
                this.queryInfo.pagesize = size
                this.getCateData()
            },
            //页数发生改变
            handleCurrentChange(current) {
                this.queryInfo.pagenum = current
                this.getCateData()
            },
            //编辑分类信息
            modifyCateMsg(modifyID) {
                this.modifyCatevisiable = true
                console.log(modifyID)
                this.modifyID = modifyID
            },
            async submitModifyCateMsg() {
                console.log(this.modifyCate.cat_name)
                const {
                    data: res
                } = await this.$http.put(`categories/${this.modifyID}`, this.modifyCate)
                if (res.meta.status !== 200) {
                    return this.$message.error('修改用户信息失败')
                }
                this.$message.success('修改用户信息成功')
                this.modifyCatevisiable = false
                this.getCateData()
            },
            //删除分类信息
            deleteCate(delID) {
                this.$confirm('此操作将永久删除此类目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {

                    const {
                        data: res
                    } = await this.$http.delete(`categories/${delID}`)
                    if (res.meta.status !== 200) {
                        return this.$message.erorr('删除失败')
                    }
                    this.$message.success('成功删除分类信息')
                    this.getCateData()

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>
<style scoped>
    /* @import url(); 引入css类 */
</style>